<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue遍历</title>
    <script src="./js/vue2.js"></script>
  </head>
  <body>
    <table id="table" border="1" width="600">
      <thead>
        <td>姓名</td>
        <td>性别</td>
        <td>地址</td>
        <td>爱好</td>
        <td>其他</td>
      </thead>
      <tbody>
          <!-- 遍历数组 -->
        <tr v-for='value in subList' >
            <!-- 遍历对象 -->
            <td v-for='val in value'>{{val}}</td>
          <!-- <td>{{value.name}}</td>
          <td>{{value.gender}}</td>
          <td>{{value.adrdess}}</td>
          <td>{{value.like}}</td>
          <td>{{value.other}}</td> -->
        </tr>
      </tbody>
    </table>
  </body>
  <!-- 通过 构造函数的方式创建对象/ -->
  <script>
    var nbn = new Vue({
      // 3.1 指定模板.当指定模板之后，将来vm实例只能控制app结构，以后app结构内的操作vm可以实现，但是如果你的相关代码写在app结构外，将不会被处理
      el: "#table",
      data:{
         subList: [{
          name: "jack",
          gender: "男",
          adrdess: "广州",
          like: "篮球",
          other: "玩"
        },
        {
          name: "loze",
          gender: "女",
          adrdess: "广州",
          like: "篮球",
          other: "玩"
        },{
          name: "tom",
          gender: "男",
          adrdess: "广州",
          like: "篮球",
          other: "喝"
        },{
          name: "John",
          gender: "男",
          adrdess: "广州",
          like: "羽毛球",
          other: "玩"
        },{
          name: "蔡徐坤",
          gender: "男",
          adrdess: "广州",
          like: "篮球",
          other: "逗比"
        }]
      }
    
      
    });
  </script>
</html>
